<template>
	<view class="time-slot-wrapper">
		<view class="all" :style="{backgroundColor: canColor}">
			<view class="leftLine" :style="leftTimeStyle"></view>
			<view class="line" v-for="(item, index) in disArr" :key="index" :style="item"></view>
			<view class="kedu">
				<view class="kedu-line" v-for="num in 24" :key="num"></view>
			</view>
		</view>
		<view class="nums">
			<view class="num" v-for="num in nums" :key="num">{{num}}</view>
		</view>
		<view class="tip">
			<view class="tip-block">
				<view class="tip-color" :style="{backgroundColor: leftColor}"></view>
				<view class="tip-text">已预定时段</view>
			</view>
			<view class="tip-block">
				<view class="tip-color" :style="{backgroundColor: lineColor}"></view>
				<view class="tip-text">可预定时段</view>
			</view>
			<view class="tip-text" style="margin-left: 20rpx; color: #FF6B6B;">至少预约{{minHours}}小时起</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "time-slot",
		props: {
			leftColor: {
				type: String,
				default: 'rgba(100, 194, 149, 1)'
			},
			lineColor: {
				type: String,
				default: 'rgba(238, 238, 238, 1)'
			},
			canColor: {
				type: String,
				default: 'rgba(238, 238, 238, 1)'
			},
			meetingId: {
				type: String,
				default: null
			},
			minHours: {
				type: String,
				default: "1"
			},
			currentDay: {
				type: String,
				default: ''
			},
			beginTimeKey: {
				type: String,
				default: 'begin_time'
			},
			endTimeKey: {
				type: String,
				default: 'end_time'
			},
			disTimeArr: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				nums: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]
			};
		},
		onLoad() {
			console.log(" onLoad this.currentDay -->");
		},
		computed: {
			curDay() {
				return this.currentDay ? this.currentDay : this.getCurrentDay()
			},
			disArr() {
				const zeroTime = this.get_unix_time(this.curDay + ' 00:00:00')
				if (this.disTimeArr.length > 0) {
					return this.disTimeArr.map(e => {
						const leftWidth = this.get_unix_time(e[this.beginTimeKey]) - zeroTime;
						const owerWidth = this.get_unix_time(e[this.endTimeKey]) - zeroTime - leftWidth;
						return {
							left: leftWidth / 864 + '%',
							width: owerWidth / 864 + '%',
							backgroundColor: this.leftColor
						}
					})
				}
				return []
			},
			leftTimeStyle() {
				return {
					left: 0,
					width: ((new Date()).getTime().toString().substr(0, 10) - this.get_unix_time(this.curDay +
						' 00:00:00')) / 864 + '%',
					backgroundColor: this.canColor
				}
			}
		},
		methods: {
			get_unix_time(dateStr) {
				// console.log("get_unix_time", dateStr);
				if(!dateStr){
					return;
				}
				var newstr = dateStr.replace(/-/g, '/');
				var date = new Date(newstr);
				var time_str = date.getTime().toString();
				return time_str.substr(0, 10);
			},
			getCurrentDay() {
				const strFormat = (str) => {
					return str < 10 ? `0${str}` : str
				}
				const myDate = new Date();
				const y = myDate.getFullYear()
				const m = myDate.getMonth() + 1;
				const d = myDate.getDate();
				return y + '-' + strFormat(m) + '-' + strFormat(d);
			}
		}
	}
</script>

<style scoped>
	.time-slot-wrapper {
		width: 100%;
	}

	.all {
		position: relative;
		width: 100%;
		height: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.line {
		position: absolute;
		height: 20rpx;
		top: 0;
		background-color: #31B179;
		z-index: 3;
	}

	.leftLine {
		position: absolute;
		height: 20rpx;
		top: 0;
		background-color: #E93A3A;
		z-index: 2;
	}

	.kedu {
		display: flex;
		position: absolute;
		align-items: flex-end;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 4;
	}

	.kedu-line {
		width: 4.1%;
		height: 6rpx;
		border-right: 1px solid #fff;
	}

	.kedu-line:nth-child(2n) {
		height: 12rpx;
	}

	.nums {
		width: 100%;
		display: flex;
		margin-top: 10rpx;
	}

	.num {
		width: 8.2%;
		font-size: 20rpx;
		text-align: center;
		color: #999;
	}

	.tip {
		display: flex;
		margin-top: 20rpx;
	}

	.tip-block {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.tip-color {
		width: 24rpx;
		height: 8rpx;
		border-radius: 4rpx;
	}

	.tip-text {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #999;
	}
</style>